<template>
  <div class="p-2 container">
    <div class="left">
      <VideoEasyPlayer :id="cameraData.equipmentId" ref="videoPlayer" :url="cameraData.url" :show-full-screen="false" />
    </div>
    <div class="right">
      <p class="device-text">设备名称：{{ cameraInfo.equipmentName }}</p>
      <p class="device-text">设备编号： {{ cameraInfo.equipmentCode }}</p>
      <p class="device-text">相机类型： <dict-tag :options="camera_type" :value="cameraInfo.cameraType"/> </p>
      <p class="device-text" >设备位置： {{ cameraInfo.parkBuildingName }} {{ cameraInfo.parkBuildingAreaName }} {{ cameraInfo.parkBuildingFloorName }} </p>
      <p>
        设备状态：
        <el-tag v-if="cameraInfo.deviceStatus == 'ONLINE'" type="success">在线</el-tag>
        <el-tag v-if="cameraInfo.deviceStatus == 'OFFLINE'" type="warning">离线</el-tag>
        <el-tag v-if="cameraInfo.deviceStatus == 'ABNORMAL'" type="danger">异常</el-tag>
        <el-tag v-if="cameraInfo.deviceStatus == 'INACTIVE'" type="info">未激活</el-tag>
        <el-tag v-if="cameraInfo.deviceStatus == 'FROZEN'" type="info">冻结</el-tag>
        <el-tag v-if="cameraInfo.deviceStatus == 'HIBERNATE'" type="info">休眠</el-tag>
      </p>

      <div class="camera-operate">
        <div class="camera-operate-item" @click="screenShot">
          <svg-icon icon-class="camera" style="width: 100%; height: 100%;" />
        </div>
        <div class="camera-operate-item">
          <svg-icon icon-class="microphone" style="width: 100%; height: 100%" />
        </div>
        <div class="camera-operate-item" :class="isMute == true ? 'speaker' : ''" @click="setMute">
          <svg-icon icon-class="speaker" style="width: 100%; height: 100%" />
        </div>
      </div>
      <div style="display: flex; justify-content: center">
        <!--    云台控制代码（2：PTZ_UP；3：PTZ_DOWN；4：PTZ_LEFT；7：PTZ_RIGHT）    -->
        <div class="camera-direction" >
          <div id="control-upper" class="camera-direction-item" style="left: 60px;" @click="ptzControl( 2 , 1 , 1 )" >
            <svg-icon icon-class="upper" style="width: 100%; height: 100%"/>
          </div>
          <div id="control-left" class="camera-direction-item" style="top: 60px;">
            <svg-icon icon-class="upper" style="width: 100%; height: 100%; transform: rotate(-90deg)" @click="ptzControl( 4 , 1 , 1 )" />
          </div>
          <div id="control-circle" >
            <svg-icon icon-class="circle" style="width: 50px; height: 50px" />
          </div>
          <div id="control-right" class="camera-direction-item " style="left: 120px; top: 60px;">
            <svg-icon icon-class="upper" style="width: 100%; height: 100%; transform: rotate(90deg)" @click="ptzControl( 7 , 1 , 1 )" />
          </div>
          <div id="control-down" class="camera-direction-item" style="top: 120px; left: 60px;" @click="ptzControl( 3 , 1 , 1 )" >
            <svg-icon icon-class="upper" style="width: 100%; height: 100%; transform: rotate(180deg)" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import VideoEasyPlayer from '@/components/VideoEasyPlayer/index.vue';
import request from '@/utils/request';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const { camera_type } = toRefs<any>(proxy?.useDict('camera_type'));
const videoPlayer = ref<any>();
const isMute = ref(true);

const props = defineProps({
  cameraData: {
    type: Object,
    required: true,
    default: () => ({ equipmentId: null, url: null })
  }
});

const cameraInfo = ref<any>({ cameraType: '' });

/**
 * 获取设备详情
 */
const getCameraInfo = () => {
  proxy.$modal.loading('加载中...')
  request({
    url: '/equipment/equipment-info/' + props.cameraData.equipmentId,
    method: 'get'
  }).then((res) => {
    console.log('获取设备详情：', res);

    cameraInfo.value = res.data;
  }).finally(() => { proxy.$modal.closeLoading() });
};

/**
 * 抓拍
 */
const screenShot = () => {
  videoPlayer.value.screenShot();
}

/**
 * 静音
 */
const setMute = ()=> {
  isMute.value = !isMute.value;
  videoPlayer.value.setMute()
}

/**
 * 云台控制
 */
const ptzControl = (controlCode: number, controlType: number, controlStep: number) => {
  // 云台控制代码（2：PTZ_UP；3：PTZ_DOWN；4：PTZ_LEFT；7：PTZ_RIGHT）
  let controlCircle = document.getElementById('control-circle')
  controlCircle.style.transition = 'transform 0.5s';
  if (controlCode == 2) { controlCircle.style.transform = 'translateY(-18px)'; }
  if (controlCode == 3) { controlCircle.style.transform = 'translateY(18px)'; }
  if (controlCode == 4) { controlCircle.style.transform = 'translateX(-18px)'; }
  if (controlCode == 7) { controlCircle.style.transform = 'translateX(18px)'; }

  setTimeout(() => {
    controlCircle.style.transform = 'translateX(0px)';
  }, 200);

  request({
    url: '/equipment/equipment-info/ptz-control',
    method: 'get',
    params: { cameraCode: cameraInfo.value.nodeId, controlCode: controlCode, controlType: controlType, controlStep: controlStep }
  }).then((res) => {
    console.log('云台控制', res);
  }).finally(() => { });
};

onMounted(() => {
  getCameraInfo();
});
</script>
<style lang="scss" scoped>
.left {
  width: 600px;
  height: 500px;
  background-color: #dadddd;
}
.right {
  width: 300px;
  padding: 20px;
  .device-text {
    display: flex;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .camera-operate {
    margin-top: 20px;
    height: 80px;
    width: 100%;
    display: flex;
    justify-content: space-around;
    .camera-operate-item {
      height: 40px;
      width: 40px;
      cursor: pointer;
    }
    .speaker {
      position: relative;
    }
    .speaker::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 3px;
      height: 44px;
      transform: rotate(-45deg) translateX(14px) translateY(12px);
      background-color: #696868;
      z-index: 1;
    }
  }
  .camera-direction {
    position: relative;
    width: 180px;
    height: 180px;
    .camera-direction-item {
      cursor: pointer;
      position: absolute;
      height: 60px;
      width: 60px;
    }
    #control-circle {
      position: absolute;
      width: 60px;
      height: 60px;
      left: 60px;
      top: 60px;
      display: flex;
      justify-content: center;
      align-items: center
    }
  }
}
</style>
